<template>
  <div
    ref="deviceImage"
    class="image-container"
    @mousedown.prevent="onMouseDown"
    @mouseup.prevent="onMouseUp"
    @mousemove.prevent="onMouseMove"
    :style="{
      width: domWidth + 'px'
    }"
  >
    <img class="device" :src="device" v-if="imgStatus === 'right'" @load="imgload" @error="imgError" />
    <div v-if="imgStatus === 'none'" style="font-size: 1.2vw;padding-top: 2vw;">请选择待绑定的设备和网关</div>
    <div v-if="imgStatus === 'error'" style="font-size: 1.2vw;padding-top: 2vw;">没有对应图片</div>

    <template v-if="!editorMode">
      <img
        class="mic alpha-anim"
        :class="marker.status"
        :src="iconsMap[marker.url]"
        @click.stop="handleClick(marker)"
        v-for="marker in markers"
        :title="'CH_'+marker.channel"
        :key="marker.id"
        :style="{
          width: imgSize + 'px',
          height: imgSize + 'px',
          left: marker.x,
          top: marker.y,
          position: 'absolute'
        }"
      />
    </template>
    <template v-else>
      <img
        class="mic2 alpha-anim"
        :class="marker.status"
        :src="iconsMap[marker.url]"
        v-for="marker in markers"
        :key="marker.id"
        :title="'CH_'+marker.channel"
        :style="{
          width: imgSize + 'px',
          height: imgSize + 'px',
          left: marker.x,
          top: marker.y,
          position: 'absolute'
        }"
      />
    </template>
  </div>
</template>

<script>
  export default {
    name: '',
    props: {
      editorMode: {
        // 是否编辑模式，编辑模式下，推送鼠标拖动事件。无法点击mic
        type: Boolean,
        default: false
      },
      imageData: {
        type: String,
        default: ''
      },
      markers: {
        type: Array
      }
    },
    watch: {
      imageData (value) {
        this.imageData = value
        this.device = this.imageData
        this.imgStatus = 'right'
      },
      markers (values) {
        this.mMarkers = values
      }
    },
    data () {
      return {
        isDragging: false,
        domWidth: 0,
        domHeight: 0,
        imgSize: 50,
        mMarkers: [],
        device: this.imgData,
        iconsMap: {
          'mic-idle': require('@/assets/sensorImg/pickup.png'),
          'mic-normal': require('@/assets/sensorImg/pickup_normally.png'),
          'mic-warn': require('@/assets/sensorImg/pickup_error2.png'),
          'mic-error': require('@/assets/sensorImg/pickup_error.png'),
          'mic-offline': require('@/assets/sensorImg/pickup_offline.png'),
          'mic-dip': require('@/assets/sensorImg/pickup_dip.png'),
          'mic-sonic-source': require('@/assets/sensorImg/pickup_sonic_source.png')
        },
        imgStatus: 'none'
      }
    },
    mounted () {
      this.domHeight = this.$refs.deviceImage.clientHeight
      this.domWidth = (this.domHeight * 820 / 485)
      this.imgSize = this.domWidth / 820 * 50
      this.$nextTick(() => {
        window.onresize = () => {
          if (this.$refs.deviceImage && this.$refs.deviceImage.clientHeight) {
            this.domHeight = this.$refs.deviceImage.clientHeight
            this.domWidth = (this.domHeight * 820 / 485)
          }
        }
      })
    },
    methods: {
      imgload () {
        this.imgStatus = 'right'
      },
      imgError () {
        this.imgStatus = 'error'
      },
      handleClick (marker) {
        this.$emit('onMicClick', marker)
      },
      onMouseMove (ev) {
        if (!this.editorMode) return
        const { offsetX, offsetY } = ev
        if (!this.isDragging) return
        // console.log(offsetX, offsetY, this.domWidth,this.domHeight)
        this.$emit('onEditorTouch', {
          x: `${((offsetX / this.domWidth - this.imgSize / 2 / this.domWidth) * 100).toFixed(2)}%`,
          y: `${((offsetY / this.domHeight - this.imgSize / 2 / this.domHeight) * 100).toFixed(2)}%`
        })
      },
      onMouseUp (ev) {
        if (!this.editorMode) return
        this.isDragging = false
        this.$emit('onMouseUp')
      },
      onMouseDown (ev) {
        if (!this.editorMode) return
        this.isDragging = true
        const { offsetX, offsetY } = ev
        // console.log(offsetX, offsetY, this.domWidth,this.domHeight)

        this.$emit('onEditorTouch', {
          x: `${((offsetX / this.domWidth - this.imgSize / 2 / this.domWidth) * 100).toFixed(2)}%`,
          y: `${((offsetY / this.domHeight - this.imgSize / 2 / this.domHeight) * 100).toFixed(2)}%`
        })
      }
    }
  }
</script>

<style scoped>
  .ant-card,.ant-card-body{
    height: 100% !important;
  }
  .image-wrap{

  }

  .alpha-anim.selected{
    border: 3px solid green;
  }
  .image-container {
    /*width: 100%;*/
    height: 100%;
    position: relative;
    user-select: none;
    position: relative;display: inline-block; margin: 0 auto;height: 100%;
  }
  .image-container img.device {
    width: 100%;
    height: 100%;
    object-fit: contain;
    pointer-events: none;
    -moz-user-select: none;
    -khtml-user-select: none;
    user-select: none;
  }

  .image-container > img.mic,
  .image-container > img.mic2 {
    width: 50px;
    height: 50px;
    position: absolute;
    object-fit: contain;
    transition-property: height, width, translateX, translateY;
    transition-duration: 0.4s;
  }
  .image-container > img.mic2 {
    pointer-events: none;
  }

  .image-container > img.mic:hover {
    width: 55px;
    height: 55px;
    transform: translateX(-5px) translateY(-5px);
  }

  .alpha-anim {
    animation-name: alphaAnimation;
    animation-duration: 1500ms;
    animation-fill-mode: both;
    animation-direction: reverse;
    animation-iteration-count: infinite;
  }

  @keyframes alphaAnimation {
    0% {
      opacity: 1;
    }
    50% {
      opacity: 0.5;
    }
    100% {
      opacity: 1;
    }
  }
</style>
